<template>
  <el-card style="width: 1000PX;height: 2000px;">
    <!-- 第一个对话框 -->
    <el-dialog v-model="siingslog1" title="Tips" style="height: auto;width: 500px;">
      <el-form :model="ftableData" label-width="auto" style="max-width: 600px">
        <el-form-item label="班组:">
          <el-input v-model="ftableData.processiing_Group" maxlength="30" />
        </el-form-item>
        <el-form-item label="负责人:">
          <el-input v-model="ftableData.processiing_People" maxlength="30" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ProcessiingsEdit1()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <span
      style="font-size: 24px;color:dodgerblue;">深加工信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <el-button plain @click="Sublog1()" style="background: #f1f2f7;color:black;border:none;margin-left: 10px;">
      设置
    </el-button>
    <br />
    <!-- 两条信息显示 -->
    <span style="font-size: 16px;color: black;">
      班组:
      {{ tableData.processiing_Group
      }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      负责人:
      {{ tableData.processiing_People }}
    </span>
    <br />
    <span
      style="font-size: 24px;color:dodgerblue;">食品安全信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <br />
    <span style="font-size: 16px;color: black;">
      <!-- 图片预览地址 -->
      <el-dialog v-model="dialogVisible1">
        <img w-full :src="dialogImageUrl1" />
      </el-dialog>
      <!-- 上传图片以','分开存储字符串 -->
      <el-upload class="avatar-uploader" v-model:file-list="fileList1" action="http://localhost:5094/api/Fileall/Fileup"
        :on-success="handleAvatarSuccess1" list-type="picture-card" :before-upload="beforeAvatarUpload1"
        :on-remove="handleRemove1" :on-preview="handlePictureCardPreview1" :limit="9">

        <el-icon class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>

    </span>
    <br />
    <span
      style="font-size: 24px;color:dodgerblue;">供应商信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <br />
    <span
      style="color:black;font-weight: 1000">原料&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <el-button plain @click="Sublog2()" style="background: #f1f2f7;color:black;border:none;margin-left: 10px;">
      设置
    </el-button>
    <br />
    <!-- 第二个对话框 -->
    <el-dialog v-model="siingslog2" title="Tips" style="height: auto;width: 500px;">
      <el-form :model="FnextWortk1" label-width="auto" style="max-width: 600px">
        <el-form-item label="生产批次:">
          <el-input v-model="FnextWortk1.processing_ShencanCode" maxlength="30" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ProcessiingsEdit2()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 一条信息显示 -->
    <span style="font-size: 16px;color: black;">
      生产批次:
      {{ NextWortk1.processing_ShencanCode
      }}
    </span>
    <br />
    <span
      style="color:black;font-weight: 1000">相关材料&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <br />
    <br />
    <!-- 利用数组的上传 -->
    <span style="font-size: 16px;color: black;">
      <!-- 图片预览地址 -->
      <el-dialog v-model="dialogVisible2">
        <img w-full :src="dialogImageUrl2" />
      </el-dialog>
      <!-- 上传图片以','分开存储字符串 -->
      <el-upload class="avatar-uploader" v-model:file-list="fileList2" action="http://localhost:5094/api/Fileall/Fileup"
        :on-success="handleAvatarSuccess2" list-type="picture-card" :before-upload="beforeAvatarUpload2"
        :on-remove="handleRemove2" :on-preview="handlePictureCardPreview2" :limit="9">

        <el-icon class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>

    </span>
    <br />
    <span
      style="color:black;font-weight: 1000">辅料&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <el-button plain @click="Sublog3()" style="background: #f1f2f7;color:black;border:none;margin-left: 10px;">
      设置
    </el-button>
    <br />
    <!-- 第二个对话框 -->
    <el-dialog v-model="siingslog3" title="Tips" style="height: auto;width: 500px;">
      <el-form :model="FnextWortk2" label-width="auto" style="max-width: 600px">
        <el-form-item label="生产批次:">
          <el-input v-model="FnextWortk2.processing_ShencanCode" maxlength="30" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ProcessiingsEdit3()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 一条信息显示 -->
    <span style="font-size: 16px;color: black;">
      生产批次:
      {{ NextWortk2.processing_ShencanCode
      }}
    </span>
    <br />
    <span
      style="color:black;font-weight: 1000">相关材料&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <br />
    <br />
    <!-- 利用数组的上传 -->
    <span style="font-size: 16px;color: black;">
      <!-- 图片预览地址 -->
      <el-dialog v-model="dialogVisible3">
        <img w-full :src="dialogImageUrl3" />
      </el-dialog>
      <!-- 上传图片以','分开存储字符串 -->
      <el-upload class="avatar-uploader" v-model:file-list="fileList3" action="http://localhost:5094/api/Fileall/Fileup"
        :on-success="handleAvatarSuccess3" list-type="picture-card" :before-upload="beforeAvatarUpload3"
        :on-remove="handleRemove3" :on-preview="handlePictureCardPreview3" :limit="9">

        <el-icon class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>

    </span>
    <br />
    <span
      style="color:black;font-weight: 1000">添加剂&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <el-button plain @click="Sublog4()" style="background: #f1f2f7;color:black;border:none;margin-left: 10px;">
      设置
    </el-button>
    <br />
    <!-- 第二个对话框 -->
    <el-dialog v-model="siingslog4" title="Tips" style="height: auto;width: 500px;">
      <el-form :model="FnextWortk3" label-width="auto" style="max-width: 600px">
        <el-form-item label="生产批次:">
          <el-input v-model="FnextWortk3.processing_ShencanCode" maxlength="30" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ProcessiingsEdit4()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 一条信息显示 -->
    <span style="font-size: 16px;color: black;">
      生产批次:
      {{ NextWortk3.processing_ShencanCode
      }}
    </span>
    <br />
    <span
      style="color:black;font-weight: 1000">相关材料&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <br />
    <br />
    <!-- 利用数组的上传 -->
    <span style="font-size: 16px;color: black;">
      <!-- 图片预览地址 -->
      <el-dialog v-model="dialogVisible4">
        <img w-full :src="dialogImageUrl4" />
      </el-dialog>
      <!-- 上传图片以','分开存储字符串 -->
      <el-upload class="avatar-uploader" v-model:file-list="fileList4" action="http://localhost:5094/api/Fileall/Fileup"
        :on-success="handleAvatarSuccess4" list-type="picture-card" :before-upload="beforeAvatarUpload4"
        :on-remove="handleRemove4" :on-preview="handlePictureCardPreview4" :limit="9">

        <el-icon class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>

    </span>
    <br />
    <span
      style="color:black;font-weight: 1000">包材&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <el-button plain @click="Sublog5()" style="background: #f1f2f7;color:black;border:none;margin-left: 10px;">
      设置
    </el-button>
    <br />
    <!-- 第二个对话框 -->
    <el-dialog v-model="siingslog5" title="Tips" style="height: auto;width: 500px;">
      <el-form :model="FnextWortk4" label-width="auto" style="max-width: 600px">
        <el-form-item label="生产批次:">
          <el-input v-model="FnextWortk4.processing_ShencanCode" maxlength="30" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ProcessiingsEdit5()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 一条信息显示 -->
    <span style="font-size: 16px;color: black;">
      生产批次:
      {{ NextWortk4.processing_ShencanCode
      }}
    </span>
    <br />
    <!-- 利用数组的上传 -->
    <span style="font-size: 16px;color: black;">
      <!-- 图片预览地址 -->
      <el-dialog v-model="dialogVisible5">
        <img w-full :src="dialogImageUrl5" />
      </el-dialog>
      <!-- 上传图片以','分开存储字符串 -->
      <el-upload class="avatar-uploader" v-model:file-list="fileList5" action="http://localhost:5094/api/Fileall/Fileup"
        :on-success="handleAvatarSuccess5" list-type="picture-card" :before-upload="beforeAvatarUpload5"
        :on-remove="handleRemove5" :on-preview="handlePictureCardPreview5" :limit="9">

        <el-icon class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>

    </span>
    <br />
    <span style="font-size: 24px;color:dodgerblue;">企业信息&nbsp;&nbsp;</span>
    <button style="background: #f1f2f7;color:black;border:none;margin-left: 10px;" @click="Sublog6()">设置</button>
    <br />
    <!-- 第二个对话框 -->
    <el-dialog v-model="siingslog6" title="Tips" style="height: auto;width: 500px;">
      <el-form :model="FcompanyWork" label-width="auto" style="max-width: 600px">
        <el-form-item label="公司名称:">
          <el-input v-model="FcompanyWork.processiings_CompanyName" maxlength="30" />
        </el-form-item>
        <el-form-item label="生成许可证:">
          <el-input v-model="FcompanyWork.processiings_ShencanCode" maxlength="30" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ProcessiingsEdit6()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 三条信息显示 -->
    <span style="font-size: 16px;color: black;">
      公司名称:
      {{ CompanyWork.processiings_CompanyName
      }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      生成许可证:
      {{ CompanyWork.processiings_ShencanCode }}
    </span>
    <br />
    <span
      style="color:black;font-weight: 1000">相关材料&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <br />
    <br />
    <span style="font-size: 24px;color:dodgerblue;">企业照片&nbsp;&nbsp;</span>
    <br />
    <!-- 利用数组的上传 -->
    <span style="font-size: 16px;color: black;">
      <!-- 图片预览地址 -->
      <el-dialog v-model="dialogVisible6">
        <img w-full :src="dialogImageUrl6" />
      </el-dialog>
      <!-- 上传图片以','分开存储字符串 -->
      <el-upload class="avatar-uploader" v-model:file-list="fileList6" action="http://localhost:5094/api/Fileall/Fileup"
        :on-success="handleAvatarSuccess6" list-type="picture-card" :before-upload="beforeAvatarUpload6"
        :on-remove="handleRemove6" :on-preview="handlePictureCardPrevie6" :limit="9">

        <el-icon class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>

    </span>
  </el-card>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { Plus, Close } from '@element-plus/icons-vue'
const siingslog1 = ref(false)
const siingslog2 = ref(false)
const siingslog3 = ref(false)
const siingslog4 = ref(false)
const siingslog5 = ref(false)
const siingslog6 = ref(false)
const tableData = reactive({
  processiing_Id: 0,
  rabit_Batch: location.search.split("=")[1],
  processiing_Group: "",
  processiing_People: "",
  processing_InfoImg: "",
  processing_MaterialImg1: "",
  processing_MaterialImg2: "",
  processing_MaterialImg3: "",
  processing_MaterialImg4: "",
  processing_CompanyImg: ""
})
const ftableData = reactive({
  processiing_Id: 0,
  rabit_Batch: location.search.split("=")[1],
  processiing_Group: "",
  processiing_People: "",
  processing_InfoImg: "",
  processing_MaterialImg1: "",
  processing_MaterialImg2: "",
  processing_MaterialImg3: "",
  processing_MaterialImg4: "",
  processing_CompanyImg: ""
})

const NextWortk1 = reactive({
  "shenchan_Id": 0,
  "rabit_Batch": location.search.split("=")[1],
  "processing_ShencanCode": ""
})
const FnextWortk1 = reactive({
  "shenchan_Id": 0,
  "rabit_Batch": location.search.split("=")[1],
  "processing_ShencanCode": ""
})
const NextWortk2 = reactive({
  "shenchan_Id": 0,
  "rabit_Batch": location.search.split("=")[1],
  "processing_ShencanCode": ""
})
const FnextWortk2 = reactive({
  "shenchan_Id": 0,
  "rabit_Batch": location.search.split("=")[1],
  "processing_ShencanCode": ""
})
const NextWortk3 = reactive({
  "shenchan_Id": 0,
  "rabit_Batch": location.search.split("=")[1],
  "processing_ShencanCode": ""
})
const FnextWortk3 = reactive({
  "shenchan_Id": 0,
  "rabit_Batch": location.search.split("=")[1],
  "processing_ShencanCode": ""
})
const NextWortk4 = reactive({
  "shenchan_Id": 0,
  "rabit_Batch": location.search.split("=")[1],
  "processing_ShencanCode": ""
})
const FnextWortk4 = reactive({
  "shenchan_Id": 0,
  "rabit_Batch": location.search.split("=")[1],
  "processing_ShencanCode": ""
})
const CompanyWork = reactive({
  "processiings_CompanyId": 0,
  "rabit_Batch": location.search.split("=")[1],
  "processiings_CompanyName": "",
  "processiings_ShencanCode": ""
})
const FcompanyWork = reactive({
  "processiings_CompanyId": 0,
  "rabit_Batch": location.search.split("=")[1],
  "processiings_CompanyName": "",
  "processiings_ShencanCode": ""
})
//打开第一个养殖弹窗
const Sublog1 = () => {
  siingslog1.value = true
}//打开第二个养殖弹窗
const Sublog2 = () => {
  siingslog2.value = true
}//打开第三个养殖弹窗
const Sublog3 = () => {
  siingslog3.value = true
}//打开第四个养殖弹窗
const Sublog4 = () => {
  siingslog4.value = true
}//打开第五个养殖弹窗
const Sublog5 = () => {
  siingslog5.value = true
}//打开第六个养殖弹窗
const Sublog6 = () => {
  siingslog6.value = true
}//填充所有数据
onMounted(() => {
  FirstShow1()
  FirstShow2()
  FirstShow3()
  FirstShow4()
  FirstShow5()
  FirstShow6()
})
//填充加工信息
const FirstShow1 = () => {
  axios.get("http://localhost:5094/api/ProcessiingsAll/FirstProcessiings", {
    params: {
      Batch: tableData.rabit_Batch
    }
  }).then(res => {
    tableData.processiing_Id = res.data.data.processiing_Id
    tableData.processiing_Group = res.data.data.processiing_Group
    tableData.processiing_People = res.data.data.processiing_People
    ftableData.processing_InfoImg = res.data.data.processing_InfoImg
    ftableData.processing_MaterialImg1 = res.data.data.processing_MaterialImg1
    ftableData.processing_MaterialImg2 = res.data.data.processing_MaterialImg2
    ftableData.processing_MaterialImg3 = res.data.data.processing_MaterialImg3
    ftableData.processing_MaterialImg4 = res.data.data.processing_MaterialImg4
    ftableData.processing_CompanyImg = res.data.data.processing_CompanyImg
    initImageList1()
    initImageList2()
    initImageList3()
    initImageList4()
    initImageList5()
    initImageList6()
    ElMessage.success(res.data.message)
  })
}
const FirstShow2 = () => {
  axios.get("http://localhost:5094/api/Processiings_OneWayAll/FirstNextSlaughts", {
    params: {
      Batch: NextWortk1.rabit_Batch
    }
  }).then(res => {
    NextWortk1.shenchan_Id = res.data.data.shenchan_Id
    NextWortk1.processing_ShencanCode = res.data.data.processing_ShencanCode
    ElMessage.success(res.data.message)
  })
}
const FirstShow3 = () => {
  axios.get("http://localhost:5094/api/Processiings_TwoWayAll/FirstNextSlaughts", {
    params: {
      Batch: NextWortk2.rabit_Batch
    }
  }).then(res => {
    NextWortk2.shenchan_Id = res.data.data.shenchan_Id
    NextWortk2.processing_ShencanCode = res.data.data.processing_ShencanCode
    ElMessage.success(res.data.message)
  })
}
const FirstShow4 = () => {
  axios.get("http://localhost:5094/api/Processiings_ThreeWayAll/FirstNextSlaughts", {
    params: {
      Batch: NextWortk3.rabit_Batch
    }
  }).then(res => {
    NextWortk3.shenchan_Id = res.data.data.shenchan_Id
    NextWortk3.processing_ShencanCode = res.data.data.processing_ShencanCode
    ElMessage.success(res.data.message)
  })
}
const FirstShow5 = () => {
  axios.get("http://localhost:5094/api/Processiings_FourWayAll/FirstNextSlaughts", {
    params: {
      Batch: NextWortk4.rabit_Batch
    }
  }).then(res => {
    NextWortk4.shenchan_Id = res.data.data.shenchan_Id
    NextWortk4.processing_ShencanCode = res.data.data.processing_ShencanCode
    ElMessage.success(res.data.message)
  })
}
const FirstShow6 = () => {
  axios.get("http://localhost:5094/api/Processiings_CompanyWay/FirstNextSlaughts", {
    params: {
      Batch: CompanyWork.rabit_Batch
    }
  }).then(res => {
    CompanyWork.processiings_CompanyId = res.data.data.processiings_CompanyId
    CompanyWork.processiings_CompanyName = res.data.data.processiings_CompanyName
    CompanyWork.processiings_ShencanCode = res.data.data.processiings_ShencanCode
    ElMessage.success(res.data.message)
  })
}
const ProcessiingsEdit1 = () => {
  if (tableData.processiing_Id == 0) {//添加养殖表数据
    if (ftableData.processiing_Group == "" || ftableData.processiing_People == "") {
      ElMessage.error("信息不能为空")
      return
    }
    axios.post("http://localhost:5094/api/ProcessiingsAll/AddProcessiings", ftableData)
      .then(res => {

        tableData.processiing_Group = ""
        tableData.processiing_Group = ""
        siingslog1.value = false
        ElMessage.success(res.data.message)
        FirstShow1()
      })
  }
  else {//修改养殖表数据
    if (ftableData.processiing_Group == "" || ftableData.processiing_People == "") {
      ElMessage.error("信息不能为空")
      return
    }
    ftableData.processiing_Id = tableData.processiing_Id
    axios.post("http://localhost:5094/api/ProcessiingsAll/UpdateProcessiings", ftableData)
      .then(res => {
        ElMessage.success(res.data.message)
        FirstShow1()
        tableData.processiing_Group = ""
        tableData.processiing_Group = ""
        siingslog1.value = false
        ElMessage.success(res.data.message)
        FirstShow1()
      })
  }
}
//保存生成批次2
const ProcessiingsEdit2 = () => {
      if (FnextWortk1.processing_ShencanCode == "") {
      ElMessage.error("生产批次信息不能为空")
      return
    }
  if (NextWortk1.shenchan_Id == 0) {//添加养殖表数据
    axios.post("http://localhost:5094/api/Processiings_OneWayAll/AddOneWayAll", FnextWortk1)
      .then(res => {
        FnextWortk1.processing_ShencanCode = ""
        siingslog2.value = false
        ElMessage.success(res.data.message)
        FirstShow2()
      })
  }
  else {//修改养殖表数据
    FnextWortk1.shenchan_Id = NextWortk1.shenchan_Id
    axios.post("http://localhost:5094/api/Processiings_OneWayAll/UpdateNextSlaughts", FnextWortk1)
      .then(res => {
        FnextWortk1.processing_ShencanCode = ""
        siingslog2.value = false
        ElMessage.success(res.data.message)
        FirstShow2()
      })
  }
}//保存生成批次3
const ProcessiingsEdit3 = () => {
     if (FnextWortk2.processing_ShencanCode == "") {
      ElMessage.error("生产批次信息不能为空")
      return
    }
  if (NextWortk2.shenchan_Id == 0) {//添加养殖表数据
    axios.post("http://localhost:5094/api/Processiings_TwoWayAll/AddTwoWayAll", FnextWortk2)
      .then(res => {
        FnextWortk2.processing_ShencanCode = ""
        siingslog3.value = false
        ElMessage.success(res.data.message)
        FirstShow3()
      })
  }
  else {//修改养殖表数据
    FnextWortk2.shenchan_Id = NextWortk2.shenchan_Id
    axios.post("http://localhost:5094/api/Processiings_TwoWayAll/UpdateNextSlaughts", FnextWortk2)
      .then(res => {
        FnextWortk2.processing_ShencanCode = ""
        siingslog3.value = false
        ElMessage.success(res.data.message)
        FirstShow3()
      })
  }
}//保存生成批次4
const ProcessiingsEdit4 = () => {
      if (FnextWortk3.processing_ShencanCode == "") {
      ElMessage.error("生产批次信息不能为空")
      return
    }
  if (NextWortk3.shenchan_Id == 0) {//添加养殖表数据
    axios.post("http://localhost:5094/api/Processiings_ThreeWayAll/AddThreeWayAll", FnextWortk3)
      .then(res => {
        FnextWortk3.processing_ShencanCode = ""
        siingslog4.value = false
        ElMessage.success(res.data.message)
        FirstShow4()
      })
  }
  else {//修改养殖表数据
    FnextWortk3.shenchan_Id = NextWortk3.shenchan_Id
    axios.post("http://localhost:5094/api/Processiings_ThreeWayAll/UpdateNextSlaughts", FnextWortk3)
      .then(res => {
        FnextWortk3.processing_ShencanCode = ""
        siingslog4.value = false
        ElMessage.success(res.data.message)
        FirstShow4()
      })
  }
}//保存生成批次5
const ProcessiingsEdit5 = () => {
    if (FnextWortk4.processing_ShencanCode == "") {
      ElMessage.error("生产批次信息不能为空")
      return
    }
  if (NextWortk4.shenchan_Id == 0) {//添加养殖表数据
    axios.post("http://localhost:5094/api/Processiings_FourWayAll/AddFourWayAll", FnextWortk4)
      .then(res => {
        FirstShow5()
        FnextWortk4.processing_ShencanCode = ""
        siingslog5.value = false
        ElMessage.success(res.data.message)
      })
  }
  else {//修改养殖表数据
    FnextWortk4.shenchan_Id = NextWortk4.shenchan_Id
    axios.post("http://localhost:5094/api/Processiings_FourWayAll/UpdateNextSlaughts", FnextWortk4)
      .then(res => {
        FirstShow5()
        FnextWortk4.processing_ShencanCode = ""
        siingslog5.value = false
        ElMessage.success(res.data.message)
      })
  }
}//保存生成批次6
const ProcessiingsEdit6 = () => {
      if (FcompanyWork.processiings_CompanyName == "" || FcompanyWork.processiings_ShencanCode == "") {
      ElMessage.error("信息不能为空")
      return
    }
  if (CompanyWork.processiings_CompanyId == 0) {//添加养殖表数据
    axios.post("http://localhost:5094/api/Processiings_CompanyWay/AddFourWayAll", FcompanyWork)
      .then(res => {
        FirstShow6()
        FcompanyWork.processiings_CompanyName = ""
        FcompanyWork.processiings_ShencanCode = ""
        siingslog6.value = false
        ElMessage.success(res.data.message)
      })
  }
  else {//修改养殖表数据
    FcompanyWork.processiings_CompanyId = CompanyWork.processiings_CompanyId
    axios.post("http://localhost:5094/api/Processiings_CompanyWay/UpdateNextSlaughts", FcompanyWork)
      .then(res => {
        FirstShow6()
        FcompanyWork.processiings_CompanyName = ""
        FcompanyWork.processiings_ShencanCode = ""
        siingslog6.value = false
        ElMessage.success(res.data.message)
      })
  }
}

//限制动检证的图片1
const beforeAvatarUpload1: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/webp') {
    ElMessage.error('只能传jpg类型')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2M')
    return false
  }
  return true
}//限制企业照片的图片2
const beforeAvatarUpload2: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/webp') {
    ElMessage.error('只能传jpg类型')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2M')
    return false
  }
  return true
}//限制动检证的图片3
const beforeAvatarUpload3: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/webp') {
    ElMessage.error('只能传jpg类型')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2M')
    return false
  }
  return true
}//限制动检证的图片4
const beforeAvatarUpload4: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/webp') {
    ElMessage.error('只能传jpg类型')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2M')
    return false
  }
  return true
}//限制动检证的图片5
const beforeAvatarUpload5: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/webp') {
    ElMessage.error('只能传jpg类型')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2M')
    return false
  }
  return true
}//限制动检证的图片6
const beforeAvatarUpload6: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/webp') {
    ElMessage.error('只能传jpg类型')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2M')
    return false
  }
  return true
}//填充数据
const fileList1 = ref<UploadUserFile[]>([])
const fileList2 = ref<UploadUserFile[]>([])
const fileList3 = ref<UploadUserFile[]>([])
const fileList4 = ref<UploadUserFile[]>([])
const fileList5 = ref<UploadUserFile[]>([])
const fileList6 = ref<UploadUserFile[]>([])
// 初始化图片列表1
const initImageList1 = () => {
  if (ftableData.processing_InfoImg && ftableData.processing_InfoImg !== '') {
    const imageUrls = ftableData.processing_InfoImg.split(',').filter(url => url.trim() !== '')
    fileList1.value = imageUrls.map((url, index) => ({
      name: `image_${index + 1}.jpg`,
      url: url.trim()
    }))
  } else {
    fileList1.value = []
  }
}
// 初始化图片列表2
const initImageList2 = () => {
  if (ftableData.processing_MaterialImg1 && ftableData.processing_MaterialImg1 !== '') {
    const imageUrls = ftableData.processing_MaterialImg1.split(',').filter(url => url.trim() !== '')
    fileList2.value = imageUrls.map((url, index) => ({
      name: `image_${index + 1}.jpg`,
      url: url.trim()
    }))
  } else {
    fileList2.value = []
  }
}// 初始化图片列表3
const initImageList3 = () => {
  if (ftableData.processing_MaterialImg2 && ftableData.processing_MaterialImg2 !== '') {
    const imageUrls = ftableData.processing_MaterialImg2.split(',').filter(url => url.trim() !== '')
    fileList3.value = imageUrls.map((url, index) => ({
      name: `image_${index + 1}.jpg`,
      url: url.trim()
    }))
  } else {
    fileList3.value = []
  }
}// 初始化图片列表4
const initImageList4 = () => {
  if (ftableData.processing_MaterialImg3 && ftableData.processing_MaterialImg3 !== '') {
    const imageUrls = ftableData.processing_MaterialImg3.split(',').filter(url => url.trim() !== '')
    fileList4.value = imageUrls.map((url, index) => ({
      name: `image_${index + 1}.jpg`,
      url: url.trim()
    }))
  } else {
    fileList4.value = []
  }
}// 初始化图片列表5
const initImageList5 = () => {
  if (ftableData.processing_MaterialImg4 && ftableData.processing_MaterialImg4 !== '') {
    const imageUrls = ftableData.processing_MaterialImg4.split(',').filter(url => url.trim() !== '')
    fileList5.value = imageUrls.map((url, index) => ({
      name: `image_${index + 1}.jpg`,
      url: url.trim()
    }))
  } else {
    fileList5.value = []
  }
}// 初始化图片列表6
const initImageList6 = () => {
  if (ftableData.processing_CompanyImg && ftableData.processing_CompanyImg !== '') {
    const imageUrls = ftableData.processing_CompanyImg.split(',').filter(url => url.trim() !== '')
    fileList6.value = imageUrls.map((url, index) => ({
      name: `image_${index + 1}.jpg`,
      url: url.trim()
    }))
  } else {
    fileList6.value = []
  }
}
// 添加新上传的图片到数组，并更新到数据库中
const handleAvatarSuccess1: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  const newImageUrl = response.data
  if (ftableData.processing_InfoImg && ftableData.processing_InfoImg !== '') {
    ftableData.processing_InfoImg += ',' + newImageUrl
  } else {
    ftableData.processing_InfoImg = newImageUrl
  }

  // 保存到数据库
  saveImagesToDatabase1()

  ElMessage.success('图片上传成功')
}
const handleAvatarSuccess2: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  // 再次检查图片数量限制（双重保险）
  const currentImageCount = ftableData.processing_MaterialImg1 ?
    ftableData.processing_MaterialImg1.split(',').filter(url => url.trim() !== '').length : 0
  if (currentImageCount >= 9) {
    ElMessage.error('最多只能上传9张图片')
    return
  }
  const newImageUrl = response.data
  if (ftableData.processing_MaterialImg1 && ftableData.processing_MaterialImg1 !== '') {
    ftableData.processing_MaterialImg1 += ',' + newImageUrl
  } else {
    ftableData.processing_MaterialImg1 = newImageUrl
  }

  // 保存到数据库
  saveImagesToDatabase2()

  ElMessage.success('图片上传成功')
}//图片后的方法3
const handleAvatarSuccess3: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  // 再次检查图片数量限制（双重保险）
  const currentImageCount = ftableData.processing_MaterialImg2 ?
    ftableData.processing_MaterialImg2.split(',').filter(url => url.trim() !== '').length : 0
  if (currentImageCount >= 9) {
    ElMessage.error('最多只能上传9张图片')
    return
  }
  const newImageUrl = response.data
  if (ftableData.processing_MaterialImg2 && ftableData.processing_MaterialImg2 !== '') {
    ftableData.processing_MaterialImg2 += ',' + newImageUrl
  } else {
    ftableData.processing_MaterialImg2 = newImageUrl
  }

  // 保存到数据库
  saveImagesToDatabas3()

  ElMessage.success('图片上传成功')
}
const handleAvatarSuccess4: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  // 再次检查图片数量限制（双重保险）
  const currentImageCount = ftableData.processing_MaterialImg3 ?
    ftableData.processing_MaterialImg3.split(',').filter(url => url.trim() !== '').length : 0
  if (currentImageCount >= 9) {
    ElMessage.error('最多只能上传9张图片')
    return
  }
  const newImageUrl = response.data
  if (ftableData.processing_MaterialImg3 && ftableData.processing_MaterialImg3 !== '') {
    ftableData.processing_MaterialImg3 += ',' + newImageUrl
  } else {
    ftableData.processing_MaterialImg3 = newImageUrl
  }

  // 保存到数据库
  saveImagesToDatabase4()

  ElMessage.success('图片上传成功')
}
const handleAvatarSuccess5: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  // 再次检查图片数量限制（双重保险）
  const currentImageCount = ftableData.processing_MaterialImg4 ?
    ftableData.processing_MaterialImg4.split(',').filter(url => url.trim() !== '').length : 0
  if (currentImageCount >= 9) {
    ElMessage.error('最多只能上传9张图片')
    return
  }
  const newImageUrl = response.data
  if (ftableData.processing_MaterialImg4 && ftableData.processing_MaterialImg4 !== '') {
    ftableData.processing_MaterialImg4 += ',' + newImageUrl
  } else {
    ftableData.processing_MaterialImg4 = newImageUrl
  }

  // 保存到数据库
  saveImagesToDatabase5()

  ElMessage.success('图片上传成功')
}
const handleAvatarSuccess6: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  // 再次检查图片数量限制（双重保险）
  const currentImageCount = ftableData.processing_CompanyImg ?
    ftableData.processing_CompanyImg.split(',').filter(url => url.trim() !== '').length : 0
  if (currentImageCount >= 9) {
    ElMessage.error('最多只能上传9张图片')
    return
  }
  const newImageUrl = response.data
  if (ftableData.processing_CompanyImg && ftableData.processing_CompanyImg !== '') {
    ftableData.processing_CompanyImg += ',' + newImageUrl
  } else {
    ftableData.processing_CompanyImg = newImageUrl
  }

  // 保存到数据库
  saveImagesToDatabase6()

  ElMessage.success('图片上传成功')
}
const handleRemove1: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // 从数组中移除对应的图片URL
  const imageUrls = ftableData.processing_InfoImg.split(',').filter(url => url.trim() !== '')
  const index = imageUrls.findIndex(url => url === uploadFile.url)

  if (index > -1) {
    imageUrls.splice(index, 1)
    ftableData.processing_InfoImg = imageUrls.join(',')
    // 更新数据库
    saveImagesToDatabase1()
    ElMessage.success('图片删除成功')
  }
}
const handleRemove2: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // 从数组中移除对应的图片URL
  const imageUrls = ftableData.processing_MaterialImg1.split(',').filter(url => url.trim() !== '')
  const index = imageUrls.findIndex(url => url === uploadFile.url)

  if (index > -1) {
    imageUrls.splice(index, 1)
    ftableData.processing_MaterialImg1 = imageUrls.join(',')
    // 更新数据库
    saveImagesToDatabase2()
    ElMessage.success('图片删除成功')
  }
}
const handleRemove3: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // 从数组中移除对应的图片URL
  const imageUrls = ftableData.processing_MaterialImg2.split(',').filter(url => url.trim() !== '')
  const index = imageUrls.findIndex(url => url === uploadFile.url)

  if (index > -1) {
    imageUrls.splice(index, 1)
    ftableData.processing_MaterialImg2 = imageUrls.join(',')
    // 更新数据库
    saveImagesToDatabas3()
    ElMessage.success('图片删除成功')
  }
}
const handleRemove4: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // 从数组中移除对应的图片URL
  const imageUrls = ftableData.processing_MaterialImg3.split(',').filter(url => url.trim() !== '')
  const index = imageUrls.findIndex(url => url === uploadFile.url)

  if (index > -1) {
    imageUrls.splice(index, 1)
    ftableData.processing_MaterialImg3 = imageUrls.join(',')
    // 更新数据库
    saveImagesToDatabase4()
    ElMessage.success('图片删除成功')
  }
}
const handleRemove5: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // 从数组中移除对应的图片URL
  const imageUrls = ftableData.processing_MaterialImg4.split(',').filter(url => url.trim() !== '')
  const index = imageUrls.findIndex(url => url === uploadFile.url)

  if (index > -1) {
    imageUrls.splice(index, 1)
    ftableData.processing_MaterialImg4 = imageUrls.join(',')
    // 更新数据库
    saveImagesToDatabase5()
    ElMessage.success('图片删除成功')
  }
}
const handleRemove6: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // 从数组中移除对应的图片URL
  const imageUrls = ftableData.processing_CompanyImg.split(',').filter(url => url.trim() !== '')
  const index = imageUrls.findIndex(url => url === uploadFile.url)

  if (index > -1) {
    imageUrls.splice(index, 1)
    ftableData.processing_CompanyImg = imageUrls.join(',')
    // 更新数据库
    saveImagesToDatabase6()
    ElMessage.success('图片删除成功')
  }
}
// 保存图片数组到数据库1
const saveImagesToDatabase1 = () => {
  axios.get('http://localhost:5094/api/ProcessiingsAll/CheckProcessingInfoImgAll', {
    params: {
      Batch: ftableData.rabit_Batch,
      CheckImages: ftableData.processing_InfoImg
    }
  }).then(res => {
    ElMessage.success('图片保存成功')
  }).catch(err => {
    ElMessage.error('图片保存失败: ' + err.message)
  })
}// 保存图片数组到数据库2
const saveImagesToDatabase2 = () => {
  axios.get('http://localhost:5094/api/ProcessiingsAll/CheckProcessingMaterialImg1All', {
    params: {
      Batch: ftableData.rabit_Batch,
      CheckImages: ftableData.processing_MaterialImg1
    }
  }).then(res => {
    ElMessage.success('图片保存成功')
  }).catch(err => {
    ElMessage.error('图片保存失败: ' + err.message)
  })
}
// 保存图片数组到数据库2
const saveImagesToDatabas3 = () => {
  axios.get('http://localhost:5094/api/ProcessiingsAll/CheckProcessingMaterialImg2All', {
    params: {
      Batch: ftableData.rabit_Batch,
      CheckImages: ftableData.processing_MaterialImg2
    }
  }).then(res => {
    ElMessage.success('图片保存成功')
  }).catch(err => {
    ElMessage.error('图片保存失败: ' + err.message)
  })
}
// 保存图片数组到数据库2
const saveImagesToDatabase4 = () => {
  axios.get('http://localhost:5094/api/ProcessiingsAll/CheckProcessingMaterialImg3All', {
    params: {
      Batch: ftableData.rabit_Batch,
      CheckImages: ftableData.processing_MaterialImg3
    }
  }).then(res => {
    ElMessage.success('图片保存成功')
  }).catch(err => {
    ElMessage.error('图片保存失败: ' + err.message)
  })
}
// 保存图片数组到数据库2
const saveImagesToDatabase5 = () => {
  axios.get('http://localhost:5094/api/ProcessiingsAll/CheckProcessingMaterialImg4All', {
    params: {
      Batch: ftableData.rabit_Batch,
      CheckImages: ftableData.processing_MaterialImg4
    }
  }).then(res => {
    ElMessage.success('图片保存成功')
  }).catch(err => {
    ElMessage.error('图片保存失败: ' + err.message)
  })
}
// 保存图片数组到数据库2
const saveImagesToDatabase6 = () => {
  axios.get('http://localhost:5094/api/ProcessiingsAll/CheckProcessing_CompanyImgAll', {
    params: {
      Batch: ftableData.rabit_Batch,
      CheckImages: ftableData.processing_CompanyImg
    }
  }).then(res => {
    ElMessage.success('图片保存成功')
  }).catch(err => {
    ElMessage.error('图片保存失败: ' + err.message)
  })
}
//图片地址
const dialogImageUrl1 = ref('')
//图片地址
const dialogImageUrl2 = ref('')
//图片地址
const dialogImageUrl3 = ref('')
//图片地址
const dialogImageUrl4 = ref('')
//图片地址
const dialogImageUrl5 = ref('')
//图片地址
const dialogImageUrl6 = ref('')
//图片弹窗
const dialogVisible1 = ref(false)
//图片弹窗
const dialogVisible2 = ref(false)
//图片弹窗
const dialogVisible3 = ref(false)
//图片弹窗
const dialogVisible4 = ref(false)
//图片弹窗
const dialogVisible5 = ref(false)
//图片弹窗
const dialogVisible6 = ref(false)
//图片预览1
const handlePictureCardPreview1: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl1.value = uploadFile.url!
  dialogVisible1.value = true
}
//图片预览2
const handlePictureCardPreview2: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl2.value = uploadFile.url!
  dialogVisible2.value = true
}
//图片预览1
const handlePictureCardPreview3: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl3.value = uploadFile.url!
  dialogVisible3.value = true
}
//图片预览2
const handlePictureCardPreview4: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl4.value = uploadFile.url!
  dialogVisible4.value = true
}
//图片预览1
const handlePictureCardPreview5: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl5.value = uploadFile.url!
  dialogVisible5.value = true
}
//图片预览2
const handlePictureCardPrevie6: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl6.value = uploadFile.url!
  dialogVisible6.value = true
}
</script>

<!-- 使用黑色实线边框,加号，边框 -->
<style>
.avatar-uploader .el-upload {
  border: 1px solid var(--el-border-color);
  border-color: black;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 17px;
  color: black;
  width: 17px;
  height: 17px;
  text-align: center;
}
</style>